<template>
	<view class="cart pb-45">
		<view class="cart-item" v-for="(item, index) in userCart.sendProducts" :key="index">
			<view class="checkbox-wrap" style="height: 111px;" @tap="toggleSelectItem(item)">
				<view :class="item.selected ? 'checkbox checkbox-selected' : 'checkbox'">
					<view class="tick" v-show="item.selected"></view>
				</view>
			</view>
			<view class="cart-item-product" @tap="navigateTo(item.productClusterId)">
				<image mode="heightFix" :src="item.thumbnail"></image>
				<view class="cart-item-product-right">
					<product-title class="title">{{item.name}}</product-title>
					<view class="bottom">
						<price class="price">￥{{(parseInt(item.price) / 100)}}</price>
						<view class="count">
							<view @tap.stop="minus(item)" :style="{color: item.quantity <= 1 ? '#ddd' : '#000'}">-</view>
							<view class="num">{{item.quantity}}</view>
							<view @tap.stop="plus(item)" :style="{color: item.quantity >= item.stock ? '#ddd' : '#000'}">+</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部结算栏 -->
		<view class="cart-bottom">
			<view class="checkbox-wrap" style="height: 45px;" @tap="toggleSelectAll">
				<view :class="hadSelectedAll ? 'checkbox checkbox-selected' : 'checkbox'">
					<view class="tick" v-show="hadSelectedAll"></view>
				</view>
			</view>
			<view class="cart-bottom-total">
				<price class="price" :fontSize="'16px'">合计：￥{{(totalPrice / 100)}}</price>
			</view>
			<view class="cart-bottom-btn">
				<view>去结算({{totalQuantity}})</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from 'vuex';
	import ProductTitle from '../../components/ProductItem/ProductTitle.vue'
	import Price from '../../components/ProductItem/Price.vue'
	export default {
		components: {
			ProductTitle,
			Price
		},
		data() {
			return {
				hadSelectedAll: false,
				totalPrice: 0,
				totalQuantity: 0
			}
		},
		async onLoad() {
			await this.getUserCartListDataAsync()
			this.setSelectedAll()
			this.setTotal()
		},
		computed: {
			...mapState(["userCart"])
		},
		methods: {
			...mapActions(["getUserCartListDataAsync", "addUserCartListAsync"]),
			toggleSelectItem(item) {
				console.log('toggleselect...', item)
				item.selected = !item.selected
				this.setSelectedAll()
				// this.setTotalPrice()
				if (item.selected) {
					this.totalPrice += item.price*item.quantity
					this.totalQuantity += item.quantity
				} else {
					this.totalPrice -= item.price*item.quantity
					this.totalQuantity -= item.quantity
				}
			},
			toggleSelectAll() {
				this.setSelectedAll()
				if (this.hadSelectedAll) {
					this.userCart.sendProducts.forEach(item => {
						item.selected = 0
					})
					this.hadSelectedAll = false
					this.totalPrice = 0
					this.totalQuantity = 0
				} else {
					this.userCart.sendProducts.forEach(item => {
						item.selected = 1
					})
					this.hadSelectedAll = true
					this.setTotal()
				}
			},
			setSelectedAll() {
				const allSelected = this.userCart.sendProducts.every(item => {
					return !!item.selected 
				})
				if (allSelected) {
					this.hadSelectedAll = true
				} else {
					this.hadSelectedAll = false
				}
			},
			setTotal() {
				this.totalPrice = 0
				this.totalQuantity = 0
				this.userCart.sendProducts
					.filter(item => !!item.selected)
					.forEach(item => {
						this.totalPrice += item.price*item.quantity
						this.totalQuantity += item.quantity
					})
			},
			plus(item) {
				if (!(item.quantity >= item.stock)) {
					item.quantity += 1
					if (item.selected) {
						this.totalPrice += item.price
						this.totalQuantity += 1
					}
				}
			},
			minus(item) {
				if (!(item.quantity <= 1)) {
					item.quantity -= 1
					if (item.selected) {
						this.totalPrice -= item.price
						this.totalQuantity -= 1
					}
				}
			},
			navigateTo(id) {
				const that = this
				uni.navigateTo({
					url: '/pages/detail/detail?' + `productClusterId=${id}&storeNo=${that.userCart.storeNo}`
				})
			}
		}
	}
</script>

<style>
	.cart {}

	.cart-item {
		display: flex;
		align-items: center;
		background-color: #FFFFFF
	}



	.cart-item-product {
		padding: 10px 0;
		margin-left: 10px;
		flex-grow: 1;
		display: flex;
		border-bottom: 1px solid #EEEEEE;
	}

	.cart-item-product image {
		width: 90px;
		height: 90px;
		min-width: 90px;
	}

	.cart-item-product-right {
		display: flex;
		flex-direction: column;
		flex-grow: 1;
		padding: 0 10px;
		justify-content: space-between;
	}

	.cart-item-product-right .title {}

	.cart-item-product-right .bottom {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.cart-item-product-right .bottom .price {}

	.cart-item-product-right .bottom .count {
		display: flex;
		border: 1px solid #DDDDDD;
		border-radius: 25rpx;
		font-size: 12px;
		line-height: 12px;
	}

	.cart-item-product-right .bottom .count view {
		padding: 10rpx 20rpx;
	}

	.cart-item-product-right .bottom .count .num {
		border-left: 1px solid #DDDDDD;
		border-right: 1px solid #DDDDDD;
	}

	.cart-bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 45px;
		background-color: #FFFFFF;
		display: flex;
	}

	.cart-bottom-total {
		flex-grow: 1;
		padding-left: 20px;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.cart-bottom-btn {
		width: 120px;
		min-width: 120px;
		margin: auto;
	}

	.cart-bottom-btn view {
		width: 80px;
		font-size: 16px;
		line-height: 16px;
		padding: 10px;
		border-radius: 20px;
		color: #FFFFFF;
		background-color: #FF4A57;
		text-align: center;
		margin: auto;
	}

	.checkbox-wrap {
		padding-left: 10px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.checkbox {
		display: inline-block;
		width: 16px;
		height: 16px;
		min-width: 16px;
		position: relative;
		border-radius: 50%;
		border: 1px solid #C8C8C8;
		box-sizing: border-box;
	}

	.checkbox-selected {
		background-color: #FF4A57;
		border: none;
	}

	.tick {
		width: 5px;
		height: 10px;
		border-color: #fffcfc;
		border-style: solid;
		border-width: 0 2px 3px 0;
		transform: rotate(45deg);
		position: absolute;
		right: 4px;
		top: 0
	}
</style>
